import { useRequest } from 'ahooks';
import { GetDataItemInfo, GetPWorkItemComInfo, GetSysDocClassInfo, GetTimQuoteSysDocInfo } from '../../api/work';
import { Button, Input, Select, Space, Table, message } from 'antd';
import { useEffect, useState } from 'react';
import { ColumnsType } from 'antd/lib/table';
import appState from '../../sotre';
import { arrDictToSelectDict } from '../../common/utils';

const columns: ColumnsType<any> = [
  {
    title: 'No.',
    dataIndex: 'name',
    width: 40,
    align: 'center',
    render: (_, r, i) => {
      return i + 1;
    },
  },
  {
    title: '文件名称',
    dataIndex: 'DOC_NAME',
  },
  {
    title: '文件分类',
    dataIndex: 'DOC_TYPE_NAME',
    width: 80,
  },
  {
    title: '操作',
    width: 70,
    align: 'center',
    render: (_, op) => {
      return (
        <Button
          size="small"
          type="primary"
          onClick={async () => {
            const nameStr = op.DOC_NAME;
            const urlStr = op.FILE_PATH;
            await appState.factory.addUrlLinkWithFile(urlStr, nameStr);
            message.success('文件链接添加成功');
          }}
        >
          插入链接
        </Button>
      );
    },
  },
];

// const options = [
//   { label: '项目SOP', value: '项目SOP' },
//   { label: '仪器SOP', value: '仪器SOP' },
//   { label: '质量手册', value: 'D060101' },
//   { label: '程序文件', value: 'H910103' },
// ];

const FileLinkView = () => {
  const [deviceType, setDeviceType] = useState<string>('');
  const [filename, setFilename] = useState<string>();

  const getTimQuoteSysDocInfo = useRequest(GetTimQuoteSysDocInfo, { manual: true });
  const getSysDocClassInfo = useRequest(GetSysDocClassInfo);

  useEffect(() => {
    const deviceType = getSysDocClassInfo.data?.[0].key;
    setDeviceType(deviceType);
  }, [getSysDocClassInfo.data]);

  useEffect(() => {
    deviceType && getTimQuoteSysDocInfo.run(deviceType, filename);
  }, [deviceType, filename]);

  return (
    <div>
      <Space size={4} style={{ padding: '4px 0' }}>
        <Select
          options={arrDictToSelectDict(getSysDocClassInfo?.data, 'value', 'key')}
          style={{ width: 120 }}
          value={deviceType}
          onChange={(v) => {
            setDeviceType(v);
          }}
        />
        <Input
          style={{ width: 160 }}
          value={filename}
          placeholder='请输入文件名称'
          onChange={(v) => {
            setFilename(v.currentTarget.value);
          }}
        />
      </Space>
      <Table
        columns={columns}
        dataSource={getTimQuoteSysDocInfo.data}
        size="small"
        bordered
        loading={getTimQuoteSysDocInfo.loading}
        pagination={false}
      />
    </div>
  );
};

export default FileLinkView;
